<template>
  <div class="mine">
    <!-- 顶部 -->
    <div class="header">
      <div class="myheader">
        <div class="ceyice">
          <img
            src="https://ftp.bmp.ovh/imgs/2021/07/b8845eb19c04a0be.png"
            alt=""
            width="24px"
          />
          <span>测一测</span>
        </div>

        <div class="shezhi">
          <img
            src="https://ftp.bmp.ovh/imgs/2021/07/27cd265c35b75c4a.png"
            alt=""
            width="26px"
          />
        </div>
      </div>
    </div>
    <!-- 个人信息 -->
    <div class="gerenxinxi">
      <div class="geren">
        <div class="touxiang">
          <img
            src="https://ftp.bmp.ovh/imgs/2021/07/6756bbfc273a271a.png"
            alt=""
            width="85px"
          />
        </div>
      </div>
      <div class="xinxi">
        <div class="nicheng">六 元 怀 里 的 柴 柴</div>

        <div class="guanzhufensi">
          <div class="guanzhu">
            <span>102</span>
            <p>关注</p>
          </div>
          <div class="fensi">
            <span>202</span>
            <p>粉丝</p>
          </div>
        </div>
      </div>
    </div>

    <!-- 皮肤变化信息  -->
    <div class="fu">
      <div class="fu1">
        <div class="fuzhi">
          <div class="lvse"></div>
          <p>肤质变化</p>
        </div>

        <div class="bianhua">
          <img src="https://ftp.bmp.ovh/imgs/2021/07/61c2e4dd322ef667.png" alt="" />
        </div>
      </div>
      <div class="fu2">
        <div class="fuzhi">
          <div class="lvse"></div>
          <p>测肤图像</p>
        </div>

        <div class="bianhua">
          <img src="https://ftp.bmp.ovh/imgs/2021/07/f3ae7833a274b3c6.png" alt="" />
        </div>
      </div>
      <div class="fu3">
        <div class="fuzhi">
          <div class="lvse"></div>
          <p>测一测历史</p>
        </div>

        <div class="bianhua">
          <img src="https://ftp.bmp.ovh/imgs/2021/07/300f2cf175266caa.png" alt="" />
        </div>
      </div>
    </div>

    <!-- 用过的产品 -->
    <div class="yongguochanpin">
      <div class="chanpin">
        <img
          src="https://ftp.bmp.ovh/imgs/2021/07/3d580a22c05ee143.png"
          alt=""
          width="20px"
        />
      </div>
      <p>我用过的产品</p>
    </div>

    <!-- 猫的图片 -->
    <div class="mao">
      <img
        src="https://ftp.bmp.ovh/imgs/2021/07/9a4ec25e6660eac4.png"
        alt=""
        width="100%"
      />
    </div>

    <!-- 引入组件库 -->
    <van-cell-group>
      <van-cell title="我收藏的产品" value="" is-link icon="https://ftp.bmp.ovh/imgs/2021/07/9390d2fb25c96fd1.png" to="/home/video" />
      <van-cell title="我关注的品牌" value="" is-link icon="https://ftp.bmp.ovh/imgs/2021/07/7bed2c9cc6d69471.png" to="/home/movie/cinema"/>
    </van-cell-group>

    <!-- 黑色过渡带 -->
    <div class="heise"></div>

    <!-- 引入组件库 -->
    <van-cell-group>
      <van-cell title="我发布的帖子" value="" is-link icon="https://ftp.bmp.ovh/imgs/2021/07/e8e30820da0e5a58.png" to="/home/movie/cinema" />
      <van-cell title="我收藏的文章" value="" is-link icon="https://ftp.bmp.ovh/imgs/2021/07/aedb2e313080bccc.png" to="/home/movie/wait"/>
    </van-cell-group>
    <van-cell-group>
      <van-cell title="我收藏的帖子" value="" is-link icon="https://ftp.bmp.ovh/imgs/2021/07/97ab25d6b92f4e93.png"  to="/home/movie/classic"/>
      <van-cell title="我的订单管理" value="" is-link icon="https://ftp.bmp.ovh/imgs/2021/07/d44c4f853c1dba1e.png"/>
    </van-cell-group>
  </div>
</template>

<script>
export default {};
</script>

<style lang="less" scpoed>
@import "../../assets/css/var.less";
html,
body,
.mine {
  
  height: 100%;
  overflow-x: hidden;
  overflow-y: scroll;
  &::-webkit-scrollbar {
    display: none; 
  }

  .header {
    position: fixed;
    height: 50.5px;
    width: 100%;
    // overflow:hidden;
    .myheader {
      background: white;
      display: flex;
      width: 100%;
      height:100%;
      // height: 50.5px;
      // background:pink;
      border-bottom: 1px solid #ccc;

      .ceyice {
        width: 285px;
        display: flex;
        align-items: center;
        padding: 9px;
      }

      .shezhi {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        padding-right: 9px;
        width: 100%;
      }
    }
  }
  .gerenxinxi {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    // background: pink;
    border-bottom: 1px solid #ccc;
    padding: 50.5px 0 0;
    .geren {
      width: 40%;
      height: 150px;

      .touxiang {
        width: 100px;
        height: 90px;
        // background: green;
      
        margin: 10px 10px 20px 20px;
      }
    }
    .xinxi {
      display: flex;
      flex-direction: column;

      .nicheng {
        font-size: 20px;
        font-weight: 600;
        // color: green;
      }

      .guanzhufensi {
        margin-top:10px;
        display: flex;
        width:220px;
        justify-content: space-around;

        .guanzhu,
        .fensi {
          display: flex;
          flex-direction: column;
          justify-content: space-around;
          height: 80px;
          width: 80px;
          // background:blue;
          font-size: 20px;
          p {
            color: #ccc;
          }
        }
      }
    }
  }

  .fu {
    display: flex;
    justify-content: space-around;
    height: 100px;
    width: 100%;
    .fu1,
    .fu2,
    .fu3 {
      display: flex;
      flex-direction: column;
      height: 100%;
      box-shadow: 10px 15px 10px 5px rgba(247, 241, 241);
      width: 30%;
      .fuzhi {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        font-size: 15px;
        .lvse {
          width: 2px;
          height: 15px;
          background: #64c8c8;
          border-radius: 2px 2px 0px 0px;
          margin: 10px 8px 2px;
        }
        p {
          font-weight: 900;
        }
      }
      .bianhua {
        display: flex;

        width: 100%;
        justify-content: flex-end;
        height: 50px;
        // background: green;
        img {
          width: 50px;
          height: 50px;
          margin-right: 5px;
        }
      }
    }
  }

  .yongguochanpin {
    display: flex;
    align-items: center;
    margin-top: 35px;
    padding: 15px 20px 10px;
    width: 100%;
    border-bottom: 1px solid #ccc;
    //  border-bottom: 1px solid #fcf7f7;
    border-top: 1px solid #ccc;
    p {
      margin-left: 20px;
      font-size: 15px;
    }
  }

  .heise {
    width: 100%;
    height: 10px;
    background: #ccc;
  }
}
</style>
